<!--
 * @Date: 2023-02-10 17:29:51
 * @LastEditTime: 2023-02-20 10:10:42
 * @LastEditTime: 2023-02-18 18:41:41
 * @FilePath: /hash-guess-game/src/views/home/topUpMoney.vue
 * 介绍:充值
-->
<script lang="ts" setup>
import router from "@@/router";
import { formatNumber } from "@@/utils/tools/tools";
import { HomeData } from "@@/api/module/home";
import useBalanceStore from "@@/store/useBalanceStore";
import toast from "@@/components/rework/toast";
import { useI18n } from "vue-i18n";
import { sdkAutoTransfer } from "@@/sdk/solana";
import { apiSafeBox } from "@@/api/module/transfer";

const { t } = useI18n();

const balanceStore = useBalanceStore();

const props = defineProps<{
  homeData: HomeData.Res | undefined;
}>();
//*获取哈希余额
balanceStore.getBalance(balanceStore.getByCode("HASH")?.index);
function onNoBtn() {
  router.back();
}
async function onOkBtn() {
  const number: number = Number(formData.number);
  const homeData = props.homeData;
  let speed_price: StrNumber = homeData?.speed_price || 100;
  if (!(number > 0)) return toast.text(`${t("qin-shu-ru-zhen-que-de-jin-e")}`);
  if (!(number >= Number(speed_price)))
    return toast.text(`${t("bu-neng-xiao-yu")} ${speed_price}`);
  toast.loading();
  //*更新余额
  const balance = await balanceStore.getBalance(
    balanceStore.getByCode("HASH")?.index
  );
  toast.close();
  if (!(number <= Number(balance))) return toast.text(t("yu-e-bu-zu"));
  transfer(number);
}
function onFooterBtn() {}
defineExpose({ onNoBtn, onOkBtn, onFooterBtn });
/**表单 */
const formData = reactive<{
  number: StrNumber | undefined;
}>({
  number: undefined,
});
/**发起转账 */
async function transfer(number: number) {
  const conin = balanceStore.getByCode("HASH");
  toast.loading();
  const res = await sdkAutoTransfer(
    conin?.contract_addr,
    number,
    conin?.format!,
    props.homeData?.speed_address!
  );
  toast.close();
  if (!res.status) return toast.error(res.message);
  apiSafeBox({
    txid: res.data!,
    number,
  });
}
function setInput(value: StrNumber | undefined) {
  formData.number = value;
}
</script>

<template>
  <div class="topUpMoney auto-mt">
    <div class="flex-J-SB">
      <div>{{ $t("yu-e") }}</div>
      <div>
        {{ formatNumber(balanceStore.getByCode("HASH")?.balance) }} HASH
      </div>
    </div>
    <div class="color-box">
      <VanField v-model="formData.number" type="digit" placeholder="0000">
        <template #extra>
          <VanButton
            @click="
              setInput(
                Math.floor(Number(balanceStore.getByCode('HASH')?.balance))
              )
            "
            color="#FED731"
          >
            MAX
          </VanButton>
        </template>
      </VanField>
    </div>
  </div>
</template>

<style lang="less" scoped>
.topUpMoney {
  .color-box {
    text-align: center;
    border-radius: 11rem;
    margin-left: calc(var(--gap-md) * 2);
    margin-right: calc(var(--gap-md) * 2);
    padding: 8rem;
    background-color: var(--C-M1);
  }
}
</style>
